<template>
<div>
  <div style="display: flex;justify-content: flex-end;">
    <div class="item">
      <div class="make" style="background: blue"></div>
      <div>假期</div>
    </div>
    <div class="item">
      <div class="make"></div>
      <div>补班</div>
    </div>
  </div>

  <YearCalendar
    v-model="year"
    :activeDates ="activeDates"
    @toggleDate="toggleDate"
    prefixClass="abc"
    lang="tw"
    :showYearSelector="showYearSelector"
    @changeYear="changeYearFindList"
  ></YearCalendar>

  <ErpFestivalModal ref="vchild" @ok="refreshDate"></ErpFestivalModal>
</div>
</template>

<script>
import YearCalendar from './modules/YearCalendar'
import ErpFestivalModal from './modules/ErpFestivalModal'
import { httpAction, getAction } from '@/api/manage'

export default {
  components: {
    YearCalendar,
    ErpFestivalModal,
  },
  data () {
    return {
      year: new Date().getFullYear(),
      activeDates: [],
      dateList: [],
      festival: {},
      showYearSelector: true,
      url: {
        allList:"/api/erp/hr/erpFestival/allList",
        queryById:"/api/erp/hr/erpFestival/queryById"
      }
    }
  },
  created() {
    this.findAll()
  },
  methods: {
    changeYearFindList(item) {
      this.year = item
      this.findAll()
    },
    toggleDate (dateInfo) {
      if(dateInfo.selected){
        this.$refs.vchild.title = '新增'
        this.$refs.vchild.add()
        this.$refs.vchild.startTime = dateInfo.date
        this.$refs.vchild.dateList = this.dateList
        this.$refs.vchild.disableSubmit = false
      } else {
        let id = ''
        for (let i = 0; i < this.activeDates.length; i++) {
          if (this.activeDates[i].date == dateInfo.date) {
            id = this.activeDates[i].id
            break
          }
        }
        getAction(this.url.queryById, { id }).then((res)=>{
          if(res.success){
            this.$refs.vchild.title = '编辑'
            this.$refs.vchild.edit(res.result)
            this.$refs.vchild.dateList = this.dateList
            this.$refs.vchild.disableSubmit = false
          }else{
            this.$message.warning(res.message);
          }
        })
      }
    },
    refreshDate() {
      this.findAll()
    },
    //查询所有记录
    findAll () {
      const that = this;
      this.activeDates = []
      this.dateList = []
      let year = this.year
      getAction(that.url.allList, { year }).then((res)=>{
        if(res.success){
          const festivalList = res.result
          festivalList.forEach((item,i) => {
            that.getAllDate (item)
          })
        }else{
          that.$message.warning(res.message);
        }
      })
    },
    //封装
    getAllDate (item) {
      var getDate = function(str) {
        var tempDate = new Date();
        var list = str.split("-");
        tempDate.setFullYear(list[0]);
        tempDate.setMonth(list[1] - 1);
        tempDate.setDate(list[2]);
        return tempDate;
      }
      var date1 = getDate(item.beginTime);
      var date2 = getDate(item.endTime);
      if (date1 > date2) {
        var tempDate = date1;
        date1 = date2;
        date2 = tempDate;
      }
      date1.setDate(date1.getDate());
      var i = 0;
      while (!(date1.getFullYear() == date2.getFullYear() && date1.getMonth() == date2.getMonth() && date1.getDate() == date2.getDate())) {
        var dayStr =date1.getDate().toString();
        if(dayStr.length ==1){
          dayStr="0"+dayStr;
        }
        var m = date1.getMonth() + 1
        this.activeDates.push({ 
          id: item.id, 
          date: date1.getFullYear() + "-" + (m < 10 ? '0' + m : m) + "-" + dayStr,
          className: item.type === 1 ? 'blue' : 'red',
          lunarValue: item.name
        })
        this.dateList.push(date1.getFullYear() + "-" + (m < 10 ? '0' + m : m) + "-" + dayStr)
        date1.setDate(date1.getDate() + 1);
        i++;
      }
      this.activeDates.push({ 
        id: item.id,
        date: item.endTime,
        className: item.type === 1 ? 'blue' : 'red',
        lunarValue: item.name
      })
      this.dateList.push(item.endTime)
    }
  }
}
</script>

<style >
  /* .abc{
    pointer-events: none;
  } */
  .red{
    background-color: red;
    color: white;
  }
  .blue{
    background-color: #2878ff;
    color: white;
  }
  .item{
    display: flex;
    align-items: center;
    margin:0 10px 10px 0;
  }
  .make{
    width: 15px;
    height: 15px;
    background: red;
    border-radius: 50%;
    margin-right: 6px;
  }
</style>